<template>
  <div class="kw-toast" :class="[position, wordWrap]" v-show="show" :style="style" v-html="text"></div>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            text: '',
            position: 'kw-toast-center',
            wordWrap: '',
            style: '',
            duration: 1500
        }
    },
    methods: {
        startTimer() {
            setTimeout(() => {
                this.show = false
            }, this.duration)
        }
    }
}
</script>

<style lang="less">
.kw-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    box-sizing: border-box;
    max-width: 80%;
    // height: 40px;
    line-height: 20px;
    padding: 10px 20px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    text-align: center;
    z-index: 9999;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.7);
    animation: show-toast .5s;
    -webkit-animation: show-toast .5s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &.kw-word-wrap {
        width: 80%;
        white-space: inherit;
        height: auto;
    }
    &.kw-toast-top {
        top: 50px;
        bottom: inherit;
    }
    &.kw-toast-center {
        top: 50%;
        margin-top: -20px;
        bottom: inherit;
    }
}
@keyframes show-toast {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
        -webkit-transform: translate(-50%, -10px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
    }
}
</style>